{% extends 'layout/manage.html' %}
{% load static %}

{% block css %}
<link rel="stylesheet" href="{% static 'web/plugin/editor-md/css/editormd.min.css' %}">
<style>
 .panel-default {
     margin-top: 10px;
 }

 .panel-default .panel-heading {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }

 .panel-body {
     padding: 0;
 }

 .title-list {
     border-right: 1px solid #dddddd;
     min-height: 500px;
 }

 .content {
     border-left: 1px solid #dddddd;
     min-height: 600px;
     margin-left: -1px;
 }

 .editormd-fullscreen{
     z-index: 1001;
 }

</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

    <div class="panel panel-default">
        <div class="panel-heading">
            <div>
                <i class="fa fa-book" aria-hidden="true"></i> wiki文档
            </div>
            <div class="function">
                <a type="button" class="btn btn-success btn-xs"
                   href="{% url 'wiki_add' project_id=request.tracer.project.id %}">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建
                </a>
            </div>
        </div>
        <div class="panel-body">
            <div class="col-sm-3 title-list">
                <div >
                    <ul id="catalog">

                    </ul>
                </div>

            </div>
            <div class="col-sm-9 content">
                <form method="post">
                    {% csrf_token %}
                    {% for field in form %}
                    {% if field.name == "content" %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        <div id="editor">
                            {{ field }}
                        </div>
                        <span class="error-msg">{{ field.errors.0 }}</span>
                    </div>
                    {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="error-msg">{{ field.errors.0 }}</span>
                    </div>
                    {% endif %}
                    {% endfor %}

                    <button style="margin-right:15px;" type="submit" class="btn btn-primary">提 交</button>
                    <button style="margin-right:15px;" type="submit" class="btn btn-default" formaction="{% url 'wiki' project_id=request.tracer.project.id %}" formmethod="get" formnovalidate>取 消</button>
                    <button style="margin-right:15px;" type="reset" class="btn btn-danger">重 置</button>
                </form>
            </div>
            <div></div>
        </div>
    </div>

</div>
{% endblock %}

{% block js %}
<script src="{% static 'web/plugin/editor-md/editormd.min.js' %}"></script>

<script>
 // http://127.0.0.1:8002/manage/2/wiki/detail/
 var WIKI_DETAIL_URL = "{% url 'wiki' project_id=request.tracer.project.id %}";
 var WIKI_UPLOAD_URL = "{% url 'wiki_upload' project_id=request.tracer.project.id %}";

 $(function () {

     initCatalog();
     initEditorMd();
 });

 /*
    初始化markdown编辑器（textare转换为编辑器）
  */
 function initEditorMd() {
     editormd('editor', {
         placeholder: "请输入内容",
         height: 400,
         path: "{% static 'web/plugin/editor-md/lib/' %}",
         imageUpload:true,
         imageUploadURL: WIKI_UPLOAD_URL,
         imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
     })
 }

 function initCatalog() {
     $.ajax({
         url: "{% url 'wiki_catalog' project_id=request.tracer.project.id %}",
         type: "GET",
         dataType: "JSON",
         success: function (res) {
             if (res.status) {
                 $.each(res.data, function (index, item) {
                     var href = WIKI_DETAIL_URL + "?wiki_id=" + item.id;
                     var li = $("<li>").attr('id', "id_" + item.id).append($('<a>').text(item.title).attr('href', href)).append($('<ul>'));

                     if (!item.parent_id) {
                         // 添加到catalog中
                         $('#catalog').append(li);
                     } else {
                         $("#id_" + item.parent_id).children('ul').append(li);
                     }
                 })
             } else {
                 alert("初始化目录失败");
             }
         }
     })
 }
</script>
{% endblock %}
